<!--
 * @Author: 17607638761 zoujiaying@yuandian.com
 * @Date: 2023-07-28 09:43:35
 * @LastEditors: 17607638761 zoujiaying@yuandian.com
 * @LastEditTime: 2023-08-07 09:22:04
 * @FilePath: \bpm-ui\src\views\management\indicatorManage\proprietaryIndicatorManage\detail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<div class="exclusive-indicator-detail-index-container">
		<el-row :gutter="10" style="padding: 10px">
			<el-col :span="6"> 服务资源编码：<el-input v-model="resource.resourceCode" style="width: 60%" size="small" disabled></el-input> </el-col>
			<el-col :span="18"> 服务资源匹配串：<el-input v-model="resource.identifyStr" style="width: 70%" size="small" disabled></el-input> </el-col>
		</el-row>
		<el-tabs size="small">
			<el-tab-pane label="识别关键字列表">
				<distin-identity-key :resource="resource"></distin-identity-key>
			</el-tab-pane>
			<el-tab-pane label="专属指标列表">
				<exclusive-indicator-list :resource="resource"></exclusive-indicator-list>
			</el-tab-pane>
			<el-tab-pane label="解密方式">
				<decrypt-mode :resource="resource"></decrypt-mode>
			</el-tab-pane>
			<el-tab-pane label="原始数据包展示" lazy>
				<OriginalPacketDisplay :resource="resource"></OriginalPacketDisplay>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup name="ExclusiveIndicatorDetailIndex" lang="ts">
import { queryByCode } from '@/api/admin/businessSourceManage/businessSourceManage';
import ExclusiveIndicatorList from './details/list.vue';
import DistinIdentityKey from './details/./distinIdentityKey.vue';
import DecryptMode from './details/./decryptMode.vue';
import OriginalPacketDisplay from '@/views/management/packagesAnalysis/originalPacketDisplay.vue';
import useTagsViewStore from '@/store/modules/tagsView';
import { ref, reactive, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import useCurrentInstance from '@/utils/useCurrentInstance';

const { proxy } = useCurrentInstance();

// 业务服务资源
let resource = ref<anyObj>({});
const route = useRoute();
const router = useRouter();
console.log('route.query', route.query);
const resourceCode: any = route.query.resourceCode;
// resource.value.resourceCode = resourceCode;
queryByCode(resourceCode).then((res: ApiResponse) => {
	if (res.data === null) {
		proxy.$modal.alert('该服务资源不存在，请刷新上级页面后再次进入', '提示', {
			confirmButtonText: '确定',
			callback: () => {
				useTagsViewStore().delView({
					name: 'Detail',
					path: '/management/indicatorManage/proprietaryIndicatorManage/detail?resourceCode=' + resourceCode,
				});
				router.go(-1);
			},
		});
	}
	// resource.value = res.data.records;
	if (res.data.records instanceof Array && res.data.records.length) {
		resource.value = res.data.records[0];
	}
});
</script>

<style rel="stylesheet/scss" lang="scss">
.exclusive-indicator-detail-index-container {
	.el-tabs__header {
		margin: 0;
	}
	.el-tabs--card > .el-tabs__header {
		border-bottom: 0;
	}
}
</style>
